<template>
  <div class="max">
    <div >
      <el-card>
        <el-form>
          <div class="sareach">
            <el-form-item>
              <span class="directory">目录名称</span>
              <el-input style="width:200px" v-model="directoryName"></el-input>
                 <span class="directory">状态</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
                 </el-select>
                <el-button
                size="small"
                style="margin-left: 10px"
                @click="cleardata"
                >清除</el-button
              >
              <el-button size="small" type="primary" >搜索</el-button>
              <el-button
                style="float: right"
                size="small"
                type="success"
                icon="el-icon-edit"
                >新增目录</el-button
              >
            </el-form-item>
          </div>
        </el-form>
        <el-alert
        v-if="alertText!==''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
        >
        </el-alert>

    <el-table
      :data="dataList"

      element-loading-text="给我一点时间"
      fit
     highlight-current-row
      style="width: 100%">
         <el-table-column
          label="序号"
          width="48"
        >
        <template slot-scope="scope">
          {{ scope.$index +1}}
        </template>
      </el-table-column>
      <el-table-column
        label="所属学科"
        >
          <template slot-scope="scope">
          {{scope.row.subjectName}}
        </template>
      </el-table-column>
         <el-table-column
          label="目录名称"
        >
        <template slot-scope="scope">
          <span>{{scope.row.directoryName}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="创建者"
        >
        <template slot-scope="scope">
          <span>{{scope.row.username}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="创建日期"
        >
        <template slot-scope="scope">
          <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="面试题数量"
        >
        <template slot-scope="scope">
          <span>{{scope.row.totals}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="状态"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.state ? '已启用' : '已禁用'}}</span>
        </template>
      </el-table-column>
       <el-table-column
          label="操作"
        >
        <template slot-scope="scope">
            <el-button type="text">{{
              scope.row.state ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state"
              >删除</el-button
            >
        </template>
      </el-table-column>
    </el-table>

       <div class="pagination"
                style="float: right"
         >
          <PageTool
            :paginationPage="directory.page"
            :paginationPagesize="directory.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/directorys.js'
import PageTool from '@/module-manage/components/page-tool'
export default {
  components: {
    PageTool
  },
  data () {
    return {
      alertText: '',
      directoryName: '',
      dataList: [],
      options: [{
        value: '选项1',
        label: '启用'
      }, {
        value: '选项2',
        label: '禁用'
      }],
      value: '',
      total: null,
      directory: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList (params) {
      const { data } = await list(this.directory)
      this.dataList = data.items
      // console.log(this.dataList)
      this.total = data.counts
      this.alertText = `数据一共${this.total}条`
    },
    handleCurrentChange (val) {
      this.directory.page = val
      this.getList()
    },
    handleSizeChange (val) {
      this.directory.pagesize = val
      if (this.directory.page === 1) {
        this.getList(this.directory)
      }
    },
    cleardata () {
      this.directoryName = ''
      this.value = ''
    }
  }
}
</script>

<style scoped lang='less'></style>
<style rel="stylesheet/scss" lang="scss" scoped>
.max{
  padding: 20px;
}
.directory {
 margin-left: 10px;
 margin-right: 5px;
 font-weight: 600;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>
